<template>
    <div style="height:100%">
        <ul class="content-box catalog">
            <template v-for="(v, i) in catalogList">
                <li :class="{active: appStatus === v.type}" :key="i" @click="changeTab(v.type)">{{v.name}}</li>
            </template>
        </ul>
        <!-- 列表 -->
        <div class="scroll-box">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getCourseList"
                style="padding-bottom: 56px;"
                >
                    <course-list-item :list="examList" v-if="examList.length>0"></course-list-item>
                    <!--暂无数据-->
                    <div v-if="!isLoading && total === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t('no_data') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <common-loading :isLoading="isLoading"></common-loading>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import courseListItem from '@/components/learn/newLearn/certifiedCoursesListItem.vue';
export default {
    name: 'myCourses',
    data() {
        return {
            isTop: false,
            isLoading: false,
            total: 0, // 总数
            appStatus: 'All',
            listIndex: 'All',
            itemStatus: null,
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            onFetching: false, //滚动到底部
            examList: [],
            pageNo: 1,
            itmTypeList: [],
            status: '',
            finished: false,
            isRefresh: false
        };
    },
    components: {
        CommonLoading,
        courseListItem
    },
    methods: {
        init() {
            this.itemStatus = this.$route.query.itemStatus;
            this.getCourseList('refresh');
        },
        /**
         * 获取列表
         * */
        getCourseList(option) {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/my-sign-in/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 10
                },
                data: {
                    isMobileInd: false,
                    isExamInd: false,
                    order: 'time',
                    sort: 'RISE',
                    isAppSearch: true,
                    appStatus: this.appStatus === 'All' ? null : this.appStatus,
                    itmTrainingFormList: this.itmTypeList === 'All' ? null : this.itmTypeList,
                    isCerTraining: true
                }
            }).then(res => {
                this.isLoading = false;
                if (option && option === 'refresh') {
                    this.examList = res.data.results;
                } else {
                    this.examList = this.examList.concat(res.data.results);
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.examList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /**
         * 切换tab
         * */
        changeTab(type) {
            // if (type === 'ALL') {
            //     this.appStatus = '';
            // } else {
            //     this.appStatus = type;
            // }
            this.appStatus = type;
            this.pageNo = 1;
            this.examList = [];
            this.getCourseList('refresh');
        },
        /**
         * 课程类型tab
         * */
        courseListChange(type) {
            // this.appStatus = this.$route.query.appStatus;
            this.listIndex = type;
            this.pageNo = 1;
            if (type === 'All') {
                this.itmTypeList = null;
                this.getCourseList('refresh');
            } else {
                this.itmTypeList = [type];
                this.getCourseList('refresh');
            }
        },
        /**
         * 下拉刷新
         * */
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getCourseList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    mounted() {
        if (this.$route.query.appStatus) {
            this.appStatus = this.$route.query.appStatus;
            if (this.$route.query.listType !== 'All') {
                this.itmTypeList = [this.$route.query.listType];
            } else {
                this.itmTypeList = null;
            }
            this.listIndex = this.$route.query.listType;
        }
        this.init();
    },
    computed: {
        catalogList() {
            return [
                {type: 'All', name: this.$t('type_all_title')}, //全部
                {type: 'I', name: this.$t('cos_app_inprogress')}, //进行中
                {type: 'C', name: this.$t('cos_app_completed')}, //已完成
                {type: 'notIAndC', name: this.$t('cos_app_other')} //其他
            ];
        },
        // 课程分类列表
        course_list() {
            return [
                { type: 'All', name: `${this.$t('type_all_title')}` },
                { type: '0', name: this.$t('cos_type_selfstudy') },
                { type: '1', name: `${this.$t('cos_type_classroom')}` },
                { type: '2', name: this.$t('CLASSROOM_Course1') },
                { type: '3', name: this.$t('INTEGRATED') }
            ]
            ;
        }
    }
};
</script>

<style scoped lang="less">
// 公共滑动盒子
.content-box{
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling:touch;
    &::-webkit-scrollbar { /**chrome、safari */
        display: none;
    }
    scrollbar-width: none; /**火狐 */
    -ms-overflow-style: none; /**IE10+ */
}
.catalog{
    padding: 15px 0;
    background: #fff;
    border: none;
    li{
        padding: 0 18px;
        color: #999;
        border: none;
    }
    .active{
        color: #075ebb;
    }
}
.scroll-box{
    height: calc(100% - 50px);
    ul{
        padding: 20px 15px 0;
        li{
            display: flex;
            margin-bottom: 8px;
            /deep/.van-image__img{
                border-top-left-radius:3px;
                border-bottom-left-radius:3px;
            }
            .info{
                flex: 1;
                padding: 8px 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-top-right-radius:3px;
                border-bottom-right-radius:3px;
                p{
                    margin-bottom: 20px;
                }
                .icon{
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
.scroll-box{
    height: calc(100% - 50px);
    /deep/.vue-scroll>div {
        height: 100%;
    }
}
</style>
